<template>
  <div class="ReViCustomerEdit-container" v-loading="loading">
    <!-- 人事信息 -->
    <el-row class="filterCondition">
      <span style="line-height:3;font-weight:bold">进件信息</span>
      <el-form label-width="82px" label-position="right" :model="formLabelAlign">
        <!-- 展示区域 只展示 不可编辑-->
        <el-col :span="3">
          <div class="grid-content miaoshu col-first row-first">客户姓名：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content row-first">{{formLabelAlign.customerName}}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu col-first row-first">进件银行：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content row-first">{{formLabelAlign.bankName}}</div>
        </el-col>
        
        <el-col :span="3">
          <div class="grid-content miaoshu row-first">合同服务费：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content col-last row-first">{{formLabelAlign.thePayeeRate }}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu col-first">客户手机号：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content">{{formLabelAlign.customerPhone}}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu">放款额：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content">{{formLabelAlign.fangKuanRate }}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu">客户知晓服务费：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content col-last">
            <el-input v-model="formLabelAlign.servicePrice" :disabled="!ShowforHG" type="number" placeholder="请输入客户知晓服务费"></el-input>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu col-first">所属顾问：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content ">{{formLabelAlign.userName }}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu">诚意金：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content">{{formLabelAlign.depositMoney}}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu">合同外费用：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content col-last">
            <el-input v-model="formLabelAlign.additionalCosts" :disabled="!ShowforHG" type="number" placeholder="请输入合同外费用"></el-input>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu col-first">顾问手机号：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content">{{formLabelAlign.userPhone }}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu">费率：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content">{{formLabelAlign.billRate}}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu">客户满意度：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content col-last">
            <el-select class="scoring" style="width: 100%;" :disabled="!ShowforHG" v-model="formLabelAlign.scoring" @change="scoringChange" placeholder="请选择客户满意度">
              <el-option label="非常满意" value="非常满意" ></el-option>
              <el-option label="满意" value="满意" ></el-option>
              <el-option label="不满意" value="不满意" ></el-option>
              <el-option label="非常不满意" value="非常不满意" ></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu col-first">归属</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content">{{ formLabelAlign.departmentName2 }}{{formLabelAlign.departmentName3 | panKong}}{{formLabelAlign.departmentName4 | panKong}}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu">客户知晓费率：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content">
            <el-input v-model="formLabelAlign.rate" :disabled="!ShowforHG" type="number" placeholder="请输入客户知晓费率"></el-input>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu">不满意原因：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content col-last">
              <el-select class="scoring" style="width: 100%;" :disabled="disScoring" v-model="formLabelAlign.reason" placeholder="请选择不满意原因">
                <el-option label="服务不好" value="服务不好" ></el-option>
                <el-option label="费用高" value="费用高" ></el-option>
                <el-option label="时间长" value="时间长" ></el-option>
                <el-option label="收费不清晰" value="收费不清晰" ></el-option>
                <el-option label="额度不够" value="额度不够" ></el-option>
                <el-option label="额度太高" value="额度太高" ></el-option>
              </el-select>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu row-first">放款时间：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content row-first">{{formLabelAlign.fangKuanTime | formatTime}}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu row-first">进件备注：</div>
        </el-col> 
        <el-col :span="13">
          <div class="grid-content content col-last">
                <template >
                  <el-tooltip class="item" effect="dark"  placement="top">
                  <div style="width:200px;" slot="content">{{formLabelAlign.note }}</div>
                    <p class="ell note" style="margin:0" >{{formLabelAlign.note }}</p>
                  </el-tooltip> 
                </template>
           </div>
        </el-col>
      </el-form>
    </el-row>
    <!-- 档案信息 -->
    <el-row class="filterCondition downOne">
        <span style="line-height:3;font-weight:bold">回访意见</span>
      <el-form label-width="82px" label-position="right" :model="formLabelAlign">
        <!-- <el-form-item class="dangan zizhi" label="客户意见">
          <el-input
            id="nianxian"
            type="textarea"
            :rows="3"
            placeholder="请输入资质内容"
            v-model="formLabelAlign.feedback"
            :disabled="!ShowforHG"
          ></el-input>
        </el-form-item><p style="padding:0;margin:0"></p> -->
        <el-form-item class="dangan zizhi" label="说明">
          <el-input
            id="nianxian"
            type="textarea"
            :rows="3"
            placeholder="请输入说明"
            v-model="formLabelAlign.explains"
            :disabled="!ShowforHG"
          ></el-input>
        </el-form-item><br>
        <el-form-item class="dangan zizhi" label="处理结果">
          <el-input
            id="nianxian"
            type="textarea"
            :rows="3"
            placeholder="请输入处理结果"
            v-model="formLabelAlign.processingResult"
            :disabled="!ShowforHG"
          ></el-input>
        </el-form-item><br>
        <!-- <el-form-item class="dangan zizhi" label="再访结果" v-show="ShowforHG"> -->
        <!-- <el-form-item class="dangan zizhi" label="再访结果" >
          <el-input
            id="nianxian"
            type="textarea"
            :rows="3"
            placeholder="请输入最终结果"
            v-model="formLabelAlign.revisitResults"
            :disabled="!ShowforHG"
          ></el-input>
        </el-form-item> -->
        <br>
        <el-form-item class="dangan zizhi" label="回访记录" >
           <div id="liuZhuanNote">
            <ul >
              <li v-for="(item,index) in this.formLabelAlign.returnNoteList" :key="index"  v-bind:style="{'color': item.colour? 'red':'#606266'}">
                <p style="margin:0" v-if="item.type == 0 ">{{++index}}--{{ item.createDate | formatTime}}--{{ item.content }}--操作人<span style="color:red">{{ item.userName }}</span> </p>
                <p style="margin:0" v-else-if="item.type == 1 ">{{++index}}--{{ item.createDate | formatTime}}--{{ item.content }}--操作人<span style="color:red">{{ item.userName }}</span> </p>
                <p style="margin:0" v-else-if="item.type == 2 ">{{++index}}--{{ item.createDate | formatTime}}--{{ item.content }}--操作人<span style="color:red">{{ item.userName }}</span> </p>
                <p style="margin:0" v-else-if="item.type == 3 ">{{++index}}--{{ item.createDate | formatTime}}--{{ item.content }}--操作人<span style="color:red">{{ item.userName }}</span></p>
                <p style="margin:0" v-else>{{++index}}--{{ item.createDate | formatTime}}--{{ item.content }}--操作人<span style="color:red">{{ item.userName }}</span></p>
              </li>
            </ul>
          </div>
          <br>
          <el-input
            id="nianxian"
            type="textarea"
            :rows="3"
            placeholder="请输入新增回访记录"
            v-model="formLabelAlign.returnNote"
          ></el-input>
        </el-form-item>
        <br>
        <el-form-item class="dangan" label="回访状态">
            <el-select v-model="formLabelAlign.accessStatus" placeholder="请选择回访状态" :disabled="!ShowforHG" > 
              <el-option label="未回访"   value="未回访" ></el-option>
              <el-option label="未接听"   value="未接听" ></el-option>
              <el-option label="有异议"   value="有异议" ></el-option>
              <el-option label="处理完成" value="处理完成" ></el-option>
              <el-option label="重复记录" value="重复记录" ></el-option>
              <!-- <el-option label="待首次回访"   value="待首次回访"  v-show="ShowforHG"></el-option>
              <el-option label="首访未接通"   value="首访未接通"  v-show="ShowforHG"></el-option>
              <el-option label="待销售部处理"   value="待销售部处理"  v-show="ShowforHG"></el-option>
              <el-option label="待合规部再访" value="待合规部再访" v-show="!ShowforHG"></el-option>
              <el-option label="结束回访"     value="结束回访"    v-show="ShowforHG"></el-option> -->
            </el-select> <span style="color:red">*</span><span style="color:grey">必填项</span><br>
        </el-form-item>
        <el-button
          type="primary"
          style="margin-left:90px"
          @click="pushEdit"
          :disabled="disTBN"
        >提交编辑内容</el-button>
        <br>
      </el-form>
    </el-row>
    <el-dialog
      title="提交"
      :modal-append-to-body='false'
      :visible.sync="submitDialogVisible"
      width="30%"
      center>
      <span style="font-size:22px" v-if="this.formLabelAlign.accessStatus == '待首次回访' || this.formLabelAlign.accessStatus == '首访未接通' || this.formLabelAlign.accessStatus == '结束回访'">确定提交编辑内容？</span>
      <span style="font-size:22px" v-else-if="this.formLabelAlign.accessStatus == '待销售部处理'">确定将客户移交业务处理？</span>
      <span style="font-size:22px" v-else-if="this.formLabelAlign.accessStatus == '待合规部再访'">确定将客户移交合规处理？</span>
      <span style="font-size:22px" v-else>确定提交编辑内容？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="submitDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="EditReViCus">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { setInterval } from "timers";
import moment from "moment";
import { mapMutations } from "vuex";
import $ from "jquery";
export default {
  name: "ReViCustomerEdit",
  // 数据
  data() {
    return {
      currentUser: {
        currentName: "",
        currentId: "",
        currentLevel: "",
        currentPhone: ""
      },
      loading: false,
      disTBN: false,
      disScoring: true, //禁用选择不满意原因
      ShowforHG: false, //
      submitDialogVisible: false, //提交弹窗的显示
      localBillId: "", //本地存储回访进件ID
      formLabelAlign: {},//编辑区域数据
      returnTable:{}
    };
  },
  filters: {
    formatTime(value) {
      return moment(value).format("YY-MM-DD HH:mm:ss");
    },
    phoneNum(val) {
      if (val != null) {
        return val.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3");
      } else {
        return "";
      }
    },
    phoneFeiKong(val) {
      if (val != null) {
        return val;
      } else {
        return "";
      }
    },
    panKong(val) {
      if (val != null && val != "") {
        return "--" + val
      }else{
        return ""
      }
    },
  },
  methods: {
      pushEdit() {
        if(this.currentUser.currentLevel!=17 && !this.formLabelAlign.returnNote) {
          this.$message.error("不要提交空记录")
          return
        }
        this.submitDialogVisible = true
      },
      scoringChange(val){
          if (val == "不满意" || val == "非常不满意") {
              this.disScoring = false;
          }else{
              this.disScoring = true;
              this.formLabelAlign.reason = "";
          }
      },
      //获取回访客户的信息
      getReViCusData(){
        this.$axios
        .get(`/spider/ReturnTable/selBillId?billId=${this.localBillId}`)
        .then(res => {
            if (res.data.messageModel.code == 0) {
              this.formLabelAlign = res.data.dataModel;


              if (this.formLabelAlign.scoring == "不满意" || this.formLabelAlign.scoring == "非常不满意") {
                this.disScoring = false;
              }else{
                this.disScoring = true;
                this.formLabelAlign.reason = "";
              }
            }else{
              this.$message.error(res.data.messageModel.messageText);
              this.clearAllCheck();
            }
          this.loading = false;
        })
        .catch(error => {
          console.log(error);
        });
      },
      //提交编辑
      EditReViCus(){
        if (this.formLabelAlign.accessStatus == "" || this.formLabelAlign.accessStatus == null) {
          this.$message.error("编辑记录不能为空！");
          this.submitDialogVisible = false;
          return false;
        }  
        if (this.formLabelAlign.scoring == "null" || this.formLabelAlign.scoring == null) {
          this.formLabelAlign.scoring = "";
        }
        if (this.formLabelAlign.reason == "null" || this.formLabelAlign.reason == null) {
          this.formLabelAlign.reason = "";
        }
        if (this.formLabelAlign.rate == "null" || this.formLabelAlign.rate == null) {
          this.formLabelAlign.rate = 0;
        }
        if (this.formLabelAlign.servicePrice == "null" || this.formLabelAlign.servicePrice == null) {
          this.formLabelAlign.servicePrice = 0;
        }
        if (this.formLabelAlign.additionalCosts == "null" || this.formLabelAlign.additionalCosts == null) {
          this.formLabelAlign.additionalCosts = 0;
        }
        if (this.formLabelAlign.feedback == "null" || this.formLabelAlign.feedback == null) {
          this.formLabelAlign.feedback = "";
        }
        if (this.formLabelAlign.explains == "null" || this.formLabelAlign.explains == null) {
          this.formLabelAlign.explains = "";
        }
        if (this.formLabelAlign.processingResult == "null" || this.formLabelAlign.processingResult == null) {
          this.formLabelAlign.processingResult = "";
        }
        if (this.formLabelAlign.revisitResults == "null" || this.formLabelAlign.revisitResults == null) {
          this.formLabelAlign.revisitResults = "";
        }
        if (this.formLabelAlign.note == "null" || this.formLabelAlign.note == null) {
          this.formLabelAlign.note = "";
        }

        if(this.formLabelAlign.returnNote == "null" || this.formLabelAlign.returnNote == null ||!this.formLabelAlign.returnNote )
        this.formLabelAlign.returnNote = ""

        this.formLabelAlign.userIds = this.currentUser.currentid
        this.$axios
        .post(`/spider/ReturnTable/updateReturnTable`,JSON.stringify(this.formLabelAlign), {headers:{'Content-type':'application/json;charset=UTF-8'}})
        .then(res => {    
          if (res.data.messageModel.code == 0) {
            this.submitDialogVisible = false;
            this.$router.push({ path: '/ReturnVisitCustomers' });
            this.$message.success("编辑成功");
          }else{
            this.submitDialogVisible = false;
            this.$message.error(res.data.messageModel.messageText);
          }
        })
        .catch(error => {
          console.log(error);
        });
      },
  },
  created() {
    this.loading = true;
    this.currentUser.currentName = window.sessionStorage.getItem("name");
    this.currentUser.currentid = window.sessionStorage.getItem("id");
    this.currentUser.currentLevel = window.sessionStorage.getItem("userLevel");
    if (this.$route.query.ReVibillId) {
      this.localBillId = this.$route.query.ReVibillId;
    } else {
      this.localBillId = window.sessionStorage.getItem("ReVibillId");
    }
    if (this.currentUser.currentLevel == 17) {
        //合规人员入口
        this.ShowforHG = true;
    }else{
        this.ShowforHG = false;
        this.formLabelAlign.accessStatus = "待合规部再访";
    }
    this.getReViCusData();
  },
  activated() {
    this.localBillId = this.$route.query.ReVibillId;
    if (this.$route.query.ReVibillId) {
      this.localBillId = this.$route.query.ReVibillId;
    } else {
      this.localBillId = window.sessionStorage.getItem("ReVibillId");
      this.$message.success("请继续编辑");
    }
    this.getReViCusData();
  }
};
</script>

<style  lang='scss'>
.ReViCustomerEdit-container {
  // display: flex;
  ul {
    list-style: none;
    padding-left: 20px;
    li {
      line-height: 20px;
      width: 100%;
      color: 	#708090;
    }
  }
  // 信息展示部分样式
  .el-row {
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    line-height: 35px;
  }
  .bg-purple-dark {
    background: #bcc4ce;
  }
  .bg-purple {
    background: #eff1f3;
  }
  .miaoshu {
    text-align: center;
    background-color: #E6EBF4;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .content {
    padding-left: 20px;
  }
  .grid-content {
    min-height: 36px;
    border-bottom: 1px solid rgb(221, 221, 221);
    border-left: 1px solid rgb(221, 221, 221);
    .el-input__inner {
      width: 100%;
      border: 0;
      padding: 0;
    }
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
//   .col-first {
    // margin-left: 20px;
//   }
  .col-last {
    margin-right: 20px;
    border-right: 1px solid rgb(221, 221, 221);
    .el-input__inner {
      width: 100%;
      border: 0;
      padding: 0;
    }
  }
  .row-last {
    margin-bottom: 30px;
  }
  .row-first {
    margin-top: 30px;
    border-top: 1px solid rgb(221, 221, 221);
  }
  input.el-input__inner {
    width: 170px;
    height: 32px;
    padding-left: 10px;
  }
  input.el-input__inner#nameInput {
    padding:0;
    color: #000;
  }
  
  // 时间分类框样式
.teamCusEdit-container input.el-input__inner#againkinds,
.teamCusEdit-container input.el-input__inner#againtime {
  width: 85px;
  padding-left: 7px;
}

// 日期选择器
daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
  width: 240px;
  height: 36px;
  vertical-align: middle;
  .el-date-editor .el-range__icon {
    line-height: 27px;
  }
  .el-date-editor .el-range-separator {
    width: 5%;
  }
}
.el-form-item {
  display: inline-block;
  margin-left: 10px;
  // margin-top: 15px;
}
.el-form-item:nth-child(n + 6) {
  margin-top: 0;
}
.el-select.time {
  margin-left: 20px;
}
.el-input--suffix .el-input__inner.fanwei {
  padding-right: 30px;
  width: 30px;
}
.filterCondition {
  background-color: #fff;
  margin-bottom: 10px;
  padding: 15px;
  .grid-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    // line-height: .9;
    margin: 0;
  }
  #addnote {
    line-height: .5;
    margin-left: 10px;
  }
  #noteList {
    width: 712px;
    // height: 160px;
    display: inline-block;
    vertical-align: top;
    border-radius: 5px;
    // border: 1px solid #DCDFE6;
    background-color: #F5F7FA;
  }
  #liuZhuanNote {
    width: 712px;
    // height: 160px;
    display: inline-block;
    vertical-align: top;
    border-radius: 5px;
    // border: 1px solid #DCDFE6;
    background-color: #F5F7FA;
  }
  .scoring {
      .el-input__inner{
          border:0;
          padding:0;
      }
  }
}
.filterCondition.downOne {
  padding-bottom: 0px;
  padding-top: 5px;
}
.zaifenCheck {
  margin-left: 20px;
}
.zaifenBth.el-button {
  padding: 10px 20px;
}
/deep/ #dateOfBirth .el-input__inner {
  width: 172px !important;
  padding-left: 30px;
}
.redistribution-container input.el-input__inner {
  width: 182px;
  height: 32px;
  padding-left: 10px;
}
#name .el-form-item__label {
  width: 43px;
}
.benhangye {
  display: inline-block;
  vertical-align: top;
  /deep/ .el-form-item__content {
    margin-left: 10px !important;
  }
  #hangyejingyan {
    display: flex;
    margin: 0;

    .el-form-item__label {
      width: 115px;
    }
  }
}
.momecontent {
  /deep/ .el-form-item__content {
    margin-left: 20px !important;
    .el-input__inner{
      width: 500px;
    }
  }
}
//跟进记录
#genjinjilu,
#zizhicontent {
  width: 712px;
  height: 100px;
}
// 从业年限
.nianxian {
  margin-left: 10px;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 182px;
}
//文本域
    .el-textarea {
        width: 712px;
    }
}
</style>